<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{
				width: 400px;
				height: 400px;
				border: 2px solid blue;
				position: relative;
			}
			#box img{
				width: 400px;
				height: 400px;
			}
			#small{
				width: 200px;
				height: 200px;
				background: rgba(255,255,0,0.4);
				position: absolute;
				top: 0px;
				left: 0px;
				display: none;
			}
			#cc{
				width: 400px;
				height: 400px;
				position: absolute;
				top: 50px;
				left: 420px;
				border: 5px solid yellow;
				overflow: hidden;
				display: none;
			}
			#cc img{
				width: 800px;
				height: 800px;
				position: absolute;
				top: 0px;
				left: 0px;
			}
			#zhaozi{
				width: 400px;
				height: 400px;
				position: absolute;
				top: 0px;
				left: 0px;
				background: rgba(0,0,0,0);
				z-index: 99;
			}
			.imglist{
				width:400px;
				height: 100px;
			}
			.imglist img{
				width: 100px;
				height: 100px;
				float: left;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
//				抓取元素
				var zhaozi = document.getElementById('zhaozi')
				var small = document.getElementById('small');
				var img = document.getElementById('img')
				var dd = document.getElementById('dd')
				var cc = document.getElementById('cc')
				var imglist = document.getElementsByClassName('imgs')
//				添加鼠标移动事件
				zhaozi.onmousemove = function(e){
//					获取事件对象
					var e =window.event||e;
//					获取鼠标相对于事件源 X轴的位置
					var x = e.offsetX||e.layerX;
//					或取鼠标相对事件源Y轴的位置
					var y = e.offsetY||e.layerY;
					
//					计算小黄狂的top值
					var t = y-100;
					var l = x-100;
					document.title = t+'|'+l;
					if(t<=0){
						t=0
					}
					if(t>=200){
						t=200
					}
					if(l<=0){
						l=0
					}
					if(l>=200){
						l=200
					}
					
//					将鼠标移动的位置赋值给小黄框
					small.style.left = l+'px';
					small.style.top = t+'px';
					
//					改变大图的位置
					img.style.top = -2*t+'px';
					img.style.left = -2*l+'px';
					
					
				}
				
				zhaozi.onmouseover = function(){
					small.style.display = 'block'
					cc.style.display = 'block'
				}
				zhaozi.onmouseout = function(){
					small.style.display = 'none'
					cc.style.display = 'none'
				}
				
//				for(var a=0;a<imglist.length;a++){
//					imglist[a].onmouseover = function(){
//						var src = this.getAttribute('src')
////						console.log(src)
//						dd.setAttribute('src',src)
//						img.setAttribute('src',src)
//					}
//					
//				}
				
			}
		</script>
	</head>
	<body>
		
		<div id="box">
			<img class="bimgs" src="img/06.jpg"/>
			<img class="bimgs" src="img/27.jpg"/>
			<img class="bimgs" src="img/28.jpg"/>
			<img class="bimgs" src="img/29.jpg"/>
			<div id="small"></div>
			<div id="zhaozi">
			</div>
		</div>
		<div class='imglist'>
			<img class="imgs" src="img/06.jpg"/>
			<img class="imgs" src="img/27.jpg"/>
			<img class="imgs" src="img/28.jpg"/>
			<img class="imgs" src="img/29.jpg"/>
		</div>
		
		
		<div id="cc">
			<img class="cimgs" src="img/06.jpg"/>
			<img class="cimgs" src="img/27.jpg"/>
			<img class="cimgs" src="img/28.jpg"/>
			<img class="cimgs" src="img/29.jpg"/>
		</div>
	</body>
</html>
